<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>监测记录</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link href="../css/customize.css" rel="stylesheet" />
		<link href="../css/modern-unified.css" rel="stylesheet" />
	</head>

	<body>
		<!-- 现代化头部 -->
		<div class="modern-header" style="box-shadow:0 2px 12px 0 rgba(46,204,113,0.06);background:rgba(255,255,255,0.98);height:56px;display:flex;align-items:center;position:sticky;top:0;z-index:20;">
			<button class="modern-back-btn" onclick="mui.back()" style="background:none;border:none;padding:0 18px 0 12px;display:flex;align-items:center;font-size:22px;color:#34495E;">
				<span class="mui-icon mui-icon-left-nav"></span>
			</button>
			<h1 class="modern-header-title" style="flex:1;text-align:center;font-size:20px;font-weight:600;color:#222;margin:0;letter-spacing:1px;">监测记录</h1>
			<div style="width:40px;"></div>
		</div>
		<div class="modern-container" style="margin-top:18px;">
			<!-- 大棚选择 -->
			<div class="modern-card">
				<button id="searchPool" type="button" class="modern-btn-outline" style="width: 100%;">
					<span style="margin-right: 8px;">🔍</span>
					<span>请选择大棚</span>
				</button>
			</div>

			<!-- 监测记录列表 -->
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="background:transparent;">
				<div class="mui-scroll" style="background:transparent;">
					<div id="list" class="modern-list">
						<!-- 记录列表将通过JavaScript动态生成 -->
					</div>
				</div>
			</div>
		</div>

		<script src="../js/mui.js"></script>
		<script src="../js/request.js"></script>
		<script type="text/javascript">
			let pageNum = 1
			let pageSize = 8
			let list = []
			let greenhouseList = []
			let greenhouseId = null;
			let baseUrl = localStorage.getItem("ip")
			
			mui.init({
				pullRefresh: {
					container: "#pullrefresh", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
					up: {
						height: 10, //可选.默认50.触发上拉加载拖动距离
						auto: false, //可选,默认false.自动上拉加载一次
						contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
						contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
						callback: pullRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					}
				}
			})

			window.addEventListener('refresh', function(event) {
				pageNum = 1
				list = []
				getlist();
			});

			window.addEventListener('load', function(event) {
				pageNum = 1
				list = []
				getList();
			})

			mui("body").on("tap", "#searchPool", function(event) {
				plus.nativeUI.actionSheet({
					title: "选择大棚", //这里就是这个弹窗的title
					cancel: "取消", //取消按钮
					buttons: greenhouseList,
				}, function(bt) {
					/*actionSheet 按钮点击事件*/
					if (bt.index > 0) {
						mui('#pullrefresh').pullRefresh().refresh(true);
						greenhouseId = bt.index == 1 ? null : greenhouseList[bt.index - 1].greenhouseId;
						pageNum = 1;
						list = [];
						getList();
					}
				})
			})

			function pullRefresh() {
				pageNum++
				getList()
			}
			
			//获取监测列表
			function getList() {
				request.get('/system/ghMonitor/list', {
						ghId: greenhouseId ? greenhouseId : null,
						pageNum,
						pageSize,
						orderByColumn: 'data_time',
						isAsc: 'desc'
					},
					(data) => {
						let pageCount = Math.floor(data.total / pageSize) + 1;
						if (pageNum > pageCount) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						} else {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);
							renderList(data.rows);
						}
					},
					(error, thrown) => {

					}
				);
			}
			
			//渲染列表
			function renderList(rows) {
				list = [...list, ...rows]
				let inHtml = ""
				for (let i = 0; i < list.length; i++) {
					var html = `<div class="modern-list-item">
									<img src="${list[i].greenhouse&&list[i].greenhouse.picture? (baseUrl+list[i].greenhouse.picture):'../image/logo.png'}" alt="">
									<div class="modern-list-content">
										<div class="modern-list-title">${list[i].greenhouse?list[i].greenhouse.name:''}</div>
										<div class="modern-list-subtitle">监测时间：${list[i].dataTime?list[i].dataTime:''}</div>
										<div style="margin-top: 8px;">
											<span class="modern-status modern-status-info" style="margin-right: 8px;">
												温度: ${list[i].temperature?list[i].temperature:''}℃
											</span>
											<span class="modern-status modern-status-info" style="margin-right: 8px;">
												湿度: ${list[i].humility? list[i].humility:''}%
											</span>
											<span class="modern-status modern-status-info" style="margin-right: 8px;">
												烟雾: ${list[i].smoke? list[i].smoke:''}ppm
											</span>
											<span class="modern-status modern-status-info">
												PM2.5: ${list[i].pm25? list[i].pm25:''}μg/m³
											</span>
										</div>
									</div>
								</div>`;
					inHtml += html;
				}
				document.getElementById('list').innerHTML = inHtml
			}

			//获取大棚列表
			function loadgreenhouseList() {
				greenhouseList = [{
					greenhouseId: null,
					title: '全部',
				}];
				let data = {}
				request.get('/system/greenhouse/list', data, (data) => {
					//提交成功回调
					console.log('调用服务端获取大棚信息成功');
					let list = data.rows;
					list.forEach(row => {
						let id = row.id;
						let name = row.name;
						greenhouseList.push({
							greenhouseId: id,
							title: name,
						})
					});
				}, (error, thrown) => {
					//发生错误时，回调
					console.error('调用服务端获取大棚信息失败', error);
				})
			}

			loadgreenhouseList();
		</script>
		<style>
			#list.modern-list .modern-list-item {
				border: 1px solid #adadad;
				box-sizing: border-box;
				padding: 18px 20px !important;
				background: transparent;
				margin: 8px 0;
				border-radius: 18px !important;
			}
		</style>
	</body>

</html>